<style lang="scss" scoped>
    #header{
        width:100%;
        background:#fff;
        height:90px;
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .logo-content{
            width:372px;
            height:100%;
            img{
                display: inline-block;
                margin:10px;
                height:70px;
                cursor: pointer;
            }
        }
        .search-content{
            width:calc(100% - 372px);
            height: 100%;
            .searc-box{
                width:calc(100% - 50px);
                display: inline-block;
                text-align:left;
                margin-left: 50px;
                height: 100%;
                line-height: 90px;
                .inline-input{
                    width:50%;
                    height: 100%;
                }
            }
        }
    }
</style>
<template>
    <div id="header">
        <div class="left logo-content">
            <img @click="goHome" src="/static/image/logo.png" />
        </div>
        <div class="right search-content">
            <div class="searc-box">
                <el-autocomplete  class="inline-input" :autofocus="focus"  v-model="searchStr" :fetch-suggestions="querySearch" placeholder="请输入药物名称(中文名/英文名/别名/商品名)" trigger-on-focus="false" @select="handleSelect">
                    <i v-if="searchStr"
                        class="el-icon-error el-input__icon"
                        slot="suffix"
                        @click="clearSearchStr">
                    </i> 
                    <template slot-scope="{ item }">
                        <div class="name"><span>{{ item.name }}</span></div>
                    </template>
                </el-autocomplete>
                <el-button type="primary" @click="goSearch" class="inline-button">搜索</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import {medicine} from 'api/index.js';
export default {
    name: 'header',
    data(){
        return{
            focus:false,
            searchStr:"",
        }
    },
    methods:{
        //点击搜索按钮
        goSearch(){
            this.$store.state.searchType = "";
            this.$store.state.searchStr = this.searchStr;
            sessionStorage.setItem("searchStr",this.searchStr);
            this.$router.push("/medicineList");
        },
        querySearch(queryString,cb) {
            this.doAllSearch(function(data){
                if(data.data){
                    cb(data.data);
                }
            });
        },
        //调用搜索接口
        doAllSearch(cb){
            var obj={
                str:this.searchStr,
            }
            medicine.drugSolrSerachAll(obj).then((data)=>{
                if(data.status == 200){
                    if(cb && typeof(cb) == "function"){
                        cb(data)
                    }
                }
            })
        },
        handleSelect(obj) {
            this.$store.state.searchId = obj.id;
            sessionStorage.setItem("searchId",obj.id);
            this.$store.state.searchType = this.$store.state.searchType ? this.$store.state.searchType : 1;
            var path = this.getPath();
            this.$router.push(path);
        },
        getPath(){
            var path = null;
            switch(this.$store.state.searchType){
                case 1:
                    path="/basic";
                    break;
                case 2:
                    path="/instructions";
                    break;
                case 3:
                    path="/genomics";
                    break;
                case 4:
                    path="/interaction";
                    break;
                case 5:
                    path="/clinicalTrial";
                    break;
                default:
                    path="/basic";
                    break;
            }
            return path;
        },
        clearSearchStr(){
            this.searchStr = "";
        },
        goHome(){
            this.$store.state.searchType = "";
            this.$store.state.searchStr = "";
            this.$store.state.searchId = "";
            sessionStorage.setItem("searchId","");
            sessionStorage.setItem("searchStr","");
            this.$router.push("/home");
        },
    },
    mounted() {
        var searchStr = sessionStorage.getItem("searchStr");
        this.$store.state.searchStr = searchStr;
        this.searchStr = searchStr;
    },
}
</script>


